<template>
  <div class="app-container" style="background-color: #f7f8fa">
    <div class="parent">
      <div class="child_box">
        <div class="div1">
          <!-- <div style="text-align: center;">
          预约日历
        </div> -->
          <el-card>
            <TopLeftCalendar @changDay="changDay" ref="topLeftCalendarRef"/>
          </el-card>
        </div>
        <div class="div2" :style="{ height: tableHeight + 'px' }">
          <BottomSelect @checkedCities="checkedCities"/>
        </div>
      </div>
      <div class="div3" :style="{ height: tableRigthHeight1 + 'px' }">
        <div style="text-align: right">
          <el-button type="primary" size="mini" @click="addAppointment"
            >新增预约</el-button
          >
        </div>
        <RigthPanel @getToday="getToday" @timeListEcho="timeListEcho" @timeListEdit="timeListEdit" :day="day" ref="rigthPanelRef" :checkedCitiesList="checkedCitiesList"/>
      </div>
    </div>

    <addappointmentDialog
      v-if="addappointmentDialog"
      :addappointmentDialog="addappointmentDialog"
      @closeDialog="closeDialog"
      ref="addappointmentDialogRef"
      :timeArr="timeArr"
      :timeObj="timeObj"
    />
  </div>
</template>

<script>
import addappointmentDialog from './addappointmentDialog.vue'
import TopLeftCalendar from './topLeftCalendar.vue'
import BottomSelect from './bottomSelect.vue'
import RigthPanel from './rigthPanel.vue'
export default {
  name: 'Home',
  components: {
    addappointmentDialog,
    TopLeftCalendar,
    BottomSelect,
    RigthPanel
  },
  data() {
    return {
      addappointmentDialog: false,
      timeArr:[],
      tableHeight: window.innerHeight - 540,
      tableRigthHeight: window.innerHeight - 200,
      tableRigthHeight1: window.innerHeight - 125,
      checkedCitiesList: [],
      timeObj:{},
      day:''
    }
  },

  mounted() {
    console.log(window.innerHeight)
  },

  methods: {
    getList() {},
    addAppointment() {
      this.addappointmentDialog = true
    },
    closeDialog() {
      this.addappointmentDialog = false
      this.timeObj ={}
      this.$nextTick(()=>{
        this.$refs.rigthPanelRef.initList(this.$refs.rigthPanelRef.calendarTitle)
      })
    },
    timeListEcho(time){
      this.timeArr = time;
      this.$nextTick(() => {
        this.addappointmentDialog = true
      })
    },
    timeListEdit(val){
      this.timeObj = val;
      this.$nextTick(() => {
        this.addappointmentDialog = true
      })
    },
    checkedCities(city) {
      this.checkedCitiesList = city
      this.$nextTick(()=>{
        this.$refs.rigthPanelRef.initList(this.$refs.rigthPanelRef.calendarTitle)
      })
    },
    changDay(day) {
      this.day = day;
      this.$refs.rigthPanelRef.getTodayNew()
    },
    getToday(){
      this.$refs.topLeftCalendarRef.getToday()
    }
  }
}
</script>
<style lang="scss" scoped>
.parent {
  display: flex;

  .child_box {
    width: 500px;

    .div1 {
      background-color: #fff;
    }
    .div2 {
      margin-top: 10px;
      overflow: auto;
      background-color: #fff;
    }
  }

  .div3 {
    margin-left: 10px;
    flex: 1;
    background-color: #fff;
    overflow: auto;
  }
}
</style>